import { useLayoutEffect, useEffect } from 'react';
import {useCounterStore} from '@/stores/index'

function Home() {
  console.log('Home组件渲染');

  // const [count, setCount] = useState(0);
  const count = useCounterStore(state => state.count)
  const increment = useCounterStore(state => state.increment)
  const decrement = useCounterStore(state => state.decrement)

  // 类似Vue3的beforeUpdate：DOM更新前同步执行
  useLayoutEffect(() => {
    console.log('组件即将更新（类似beforeUpdate），当前count：', count);
  }, [count]); // 监听count变化

  useEffect(() => {
    const timer = setInterval(() => console.log('Timer running:', Date.now()), 1000);
    return () => {
      clearInterval(timer); // 清理定时器
      console.log('Home组件即将卸载');
    };
  });

  // 类似Vue3的updated：DOM更新后异步执行
  useEffect(() => {
    console.log('组件已更新（类似updated），当前count：', count);
  }, [count]); // 监听count变化

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Home;